<template>
  <div>
    <a-form-model
      ref="form"
      :rules="dialog.rules"
      :model="dialog.form"
      validateOnRuleChange
      :label-col="{ span: 4, style: 'width:160px;' }"
      :wrapper-col="{ span: 14, style: 'width:calc(100% - 160px)' }"
    >
      <a-row :gutter="10">
        <a-col :xl="24" :lg="24" :md="24" v-if="pointList">
          <a-timeline mode="alternate" class="timeline">
            <a-timeline-item
              v-for="(item, index) in pointList"
              :key="index"
              :color="item.auditStatus == 1 || item.auditStatus == 5 ? 'green' : item.auditStatus == 2 ? 'red' : 'gray'"
            >
              <a-icon
                v-if="item.auditStatus == 3"
                slot="dot"
                type="clock-circle-o"
                style="font-size: 16px; color: blue"
              />
              <p>
                {{
                  '节点名称:' +
                  item.pointName +
                  ' —— ' +
                  ('审批节点说明：' + (item.pointDesc ? item.pointDesc : '无')) +
                  ' —— ' +
                  (item.auditStatus == 0
                    ? '状态:未审批 '
                    : item.auditStatus == 1
                    ? '状态:已通过'
                    : item.auditStatus == 2
                    ? '状态:已驳回'
                    : item.auditStatus == 3
                    ? '状态:审核中'
                    : item.auditStatus == 4
                    ? '状态:未提交'
                    : item.auditStatus == 5
                    ? '状态:已提交'
                    : '')
                }}
              </p>

              <p v-for="(item2, index2) in item.personList" :key="index2">
                <span style="display: inline-block; width: 30px">
                  <!-- <a-icon type="check-circle"  style="color:green"/> -->
                  <a-icon v-if="item2.status == 1" type="check" style="color: green; padding: 0 10px" />
                  <a-icon v-if="item2.status == 2" type="close" style="color: red; padding: 0 10px" />
                  <!-- <p  style="display: inline-block;padding:0 10px">sadasdasdas</p> -->
                </span>
                <span>{{ item2.personName }}</span>
              </p>
            </a-timeline-item>
          </a-timeline>
        </a-col>
        <a-col :xl="24" :lg="24" :md="24">
          <a-table
            ref="table"
            bordered
            :rowKey="
              (record, index) => {
                return index
              }
            "
            :pagination="false"
            :columns="tables.columns"
            :data-source="tables.loadData"
          >
          </a-table>
        </a-col>
      </a-row>
    </a-form-model>
  </div>
</template>
<script>
import { marketInfoApprovalHistory } from '@/api/marketManagement/marketInfo/marketInfo'
export default {
  name: 'approveHistory',
  props: {},
  components: {},
  data() {
    return {
      activeKey: '',
      pointList: [],
      tables: {
        columns: [
          {
            title: '序号',
            // fixed: 'left',
            ellipsis: true,
            width: 61,
            align: 'center',
            customRender: (text, record, index) => `${index + 1}`,
          },
          {
            title: '节点名称',
            dataIndex: 'pointName',
            // ellipsis: true,
            align: 'center',
            width: 100,
          },
          {
            title: '审批节点说明',
            dataIndex: 'pointDesc',
            ellipsis: true,
            align: 'center',
            width: 150,
            customRender: (text, record, index) => {
              return text ? text : '无'
            },
          },
          {
            title: '审批人',
            dataIndex: 'personName',
            ellipsis: true,
            align: 'center',
            width: 100,
          },
          {
            title: '审批结果',
            dataIndex: 'auditStatus',
            ellipsis: true,
            align: 'center',
            width: 100,
            customRender: (text, record, index) => {
              if (text == 1) return '通过'
              else if (text == 2) return '驳回'
              else if (text == 0) return '提交'
              else if (text == 20) return '撤回'
            },
          },
          {
            title: '审批意见',
            dataIndex: 'reason',
            // ellipsis: true,
            align: 'center',
            width: 500,
          },
          {
            title: '审批时间',
            dataIndex: 'createTime',
            ellipsis: true,
            align: 'center',
            width: 140,
          },
        ],
        loadData: [],
      },
      dialog: {
        show: false,
      },
    }
  },
  methods: {
    init(record, type) {
      //id为计划
      var id = record.id || ''
      marketInfoApprovalHistory({ dataId: id, auditType: type }).then((res) => {
        this.dialog.show = true
        this.$nextTick(() => {
          this.tables.loadData = res.logList || []

          this.pointList = res.pointList || []
        })
      })
    },

    allEvents(type, param, param1) {
      switch (type) {
        case 'cancel':
          this.dialog.show = false
          this.activeKey = ''
          this.tables.loadData = []
          break
      }
    },
  },
}
</script>
<style scoped>
.timeline {
  max-height: 500px;
  overflow-y: auto;
  margin-bottom: 40px;
  padding-top: 20px;
}
</style>